<template>
 <div style="height: 100vh">
  <div style="height: 90px;margin: 0 30px 0">
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="change_tab" @tab-change="change_tab">
    <el-tab-pane label="产品" :name=router_arr[0]>

    </el-tab-pane>
    <el-tab-pane label="下载" :name=router_arr[1]>

    </el-tab-pane>
    <el-tab-pane label="订单" :name=router_arr[2]>

    </el-tab-pane>
   </el-tabs>
  </div>
  <div style="margin: 0 30px 0">
   <router-view/>
  </div>

 </div>
</template>

<script setup>
import {ref} from 'vue'
import router from "@/router";
//选中选项卡的 name，默认值是当前路由的名称
const activeName = ref(router.currentRoute.value.path)
//切换标签页事件
const change_tab = (pane, ev)=>{
 router.push(pane.props.name)
 //console.log(router.currentRoute.value.path)
}
//路由数组
const router_arr=ref([
    '/product','/download','orders'
])


</script>

<style>

</style>